<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>最佳拍档</title>
    <meta name="keywords" content="最佳拍档">
    <meta name="description" content="最佳拍档">
    <style>
        .right h2{
            margin: 10px 0;
        }
        .right li{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="right p20" style="margin-left: 200px;">
    <input type="hidden" id="userId" th:value="${loginUser.userid}">
    <input type="hidden" id="userRole" th:value="${userRole}">
    <blockquote class="layui-elem-quote">
        <h2>欢迎您进入最佳拍档CRM管理平台</h2>
        <p>如果您看到本页面，您将作为CRM管理平台的记录管理员，需要处理以下工作：</p>
        <p>1、定时查看和管理记录，将长期未更新或需要调整的资源做回收处理；</p>
        <p>2、对回收的资源或暂时没人维护的资源做重新分配处理。</p>
        <p>其它：您可以在搜索框内输入关键字检索相关的资源或记录。</p>
    </blockquote>
    <div style="display: flex;justify-content: space-between">
        <div></div>
        <div style="display: flex;padding-right: 20px;">
            <div style="width: 250px;">
                <input type="text" name="keyword" id="keyword" required lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input" onkeydown="keydownSearch()">
            </div>
            <div style="padding-left: 5px;">
                <button type="button" class="layui-btn" onclick="search()">搜索</button>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12" style="padding-right: 20px">
            <table class="layui-table layui-form" lay-filter="EditListTable" id="EditListTable" lay-data="{id: 'tableid'}">
                <thead>
                <tr class="id36567">
                    <th lay-data="{checkbox:true}"></th>
                    <th lay-data="{field:'dateBetween', align: 'center', style: 'color:red'}">未更新天数</th>
                    <th lay-data="{field:'openeaId', align: 'center'}">用户编号</th>
                    <th lay-data="{field:'cooperateGrade', align: 'center'}">合作等级</th>
                    <th lay-data="{field:'userName', align: 'center'}">用户名</th>
                    <th lay-data="{field:'category', align: 'center'}">品类</th>
                    <th lay-data="{field:'phoneNum', align: 'center'}">手机号/微信号</th>
                    <th lay-data="{field:'area', align: 'center'}">区域</th>
                    <th lay-data="{field:'address', align: 'center'}">地址</th>
                    <th lay-data="{fixed: 'right', toolbar: '#operate', width: 120, align: 'center'}">操作</th>
                </tr>
                </thead>
            </table>
            <script type="text/html" id="operate">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            </script>
        </div>
    </div>
    <!-- 头部工具栏 -->
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
        </div>
    </script>
</div>

</body>

<script type="text/javascript">

    window.onload = function(){
        let url = window.location.pathname;
        if(url=="/" || url=="/Admin"){

        }else{
            $('a[href="'+url+'"]').parent().addClass('layui-this');
            $('a[href="'+url+'"]').parent().parent().parent().addClass('layui-nav-itemed');
        }
        let userId = $("#userId").val();
        let userRole = $("#userRole").val();
        if(userRole.indexOf('deptManage') != -1){//部门经理查看所有人的团长信息
            userId = "";
        }
        initData(userId);
    }

    //初始化数据
    function initData(userId){
        layui.use(['table', 'layer', 'form'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table, form = layui.form;

            //加载列表的后端 url
            var getListUrl = '/favorites/community/list';
            //对于任意一个 table，按照官方的说法，有三种不同的初始化渲染方式，不多介绍，而这里使用的方式姑且看做第三种：转换静态表格 方式
            //转换静态表格方式，自然首先需要有一个已经存在的表格，然后再通过 js 方式转化为 Layui 表格
            //无论哪种方式的 Layui table 初始化自然需要配置项
            //通过转化的方式初始化 Layui table，配置项部分可以在 源table中，部分在js中，源 table 的源代码上文已经给出，下面给出一个示例的 js 中的配置项
            var tableOptions = {
                elem: '#EditListTable',
                url: getListUrl, //请求地址
                method: 'GET', //方式
                id: 'EditListTable', //生成 Layui table 的标识 id，必须提供，用于后文刷新操作，笔者该处出过问题
                page: true, //是否分页
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                where: { userId: userId }, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
                response: { //定义后端 json 格式，详细参见官方文档
                    statusName: 'code', //状态字段名称
                    statusCode: '200', //状态字段成功值
                    msgName: 'msg', //消息字段
                    countName: 'total', //总数字段
                    dataName: 'rows' //数据字段
                },
                limit: 10,//每页显示条数
                limits: [10,20,50,100,150,200,300],//可选择范围
                defaultToolbar: ['filter'],
                toolbar: '#toolbar'
            };
            // 表初始化
            var createTable = function () {
                table.init('EditListTable', tableOptions);// table lay-filter
            };
            // 表刷新方法
            var reloadTable = function () {
                table.reload("tableid", { //此处是上文提到的 初始化标识id
                    url: getListUrl,
                    where: {userId:userId}
                });
            };
            // 表初始化
            createTable();

            //监听行工具事件
            table.on('tool(EditListTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    window.location.href = "http://" + window.location.host + "/Admin/GroupPurchase/EditGroupPurchaseInfo?unid="+data.linkId+"&returnurl=CollectionGroupPurchase";
                }
            });

            //头部工具栏按钮触发事件
            table.on('toolbar(EditListTable)', function(obj){
                //获取选中行
                let toolbar = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'delete':
                        if (toolbar.data.length > 0) {
                            layer.confirm('确定删除选中的记录吗？', function (index) {
                                let ids = [];
                                for (let i in toolbar.data){
                                    ids.push(toolbar.data[i].favId);
                                }
                                $.ajax({
                                    url: '/favorites/delete',
                                    type: 'DELETE',
                                    data: JSON.stringify(ids),
                                    contentType: 'application/json',
                                    dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                                    success: function (res) {
                                        if(res.code == 200){
                                            layer.close(index);
                                            layer.msg("删除成功！");
                                            //两秒后重载表格数据
                                            setTimeout(function () {
                                                reloadTable();
                                            }, 2000);
                                        }else {
                                            layer.close(index);
                                            layer.msg(res.msg);
                                        }
                                    }
                                });
                            });
                        } else {
                            layer.msg("请至少选中一项");
                        }
                        break;
                };
            });

            /**
             * 判断值是否不为空
             * @param {Object} val
             */
            function isNotNull(val){
                if(val!=='undefined' && val!=="" && val!=null){
                    return true
                }
                return false
            }

        });
    }

    //搜索
    function search(){
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            table.reload('tableid', {
                where: {
                    userId:$("#userId").val(),
                    searchStr:$("#keyword").val()
                }
                ,page: {
                    pageNum: 1 //重新从第 1 页开始
                }
            });
        })
    }

    //回车搜索
    function keydownSearch() {
        let event = window.event || arguments.callee.caller.arguments[0];
        if (event.keyCode == 13)
        {
            search();
        }
    }

    //文件上传
    layui.use(['upload','table'], function(){
        let upload = layui.upload;
        let table = layui.table;
        //执行实例
        let uploadInst = upload.render({
            elem: '#UploadData' //绑定元素
            ,url: '/community/randImport' //上传接口
            ,accept: 'file' //允许上传的文件类型
            ,done: function(res){
                //上传完毕回调
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg(res.msg);
                });
                //两秒后重载表格数据
                setTimeout(function(){
                    table.reload("tableid", { //此处是上文提到的 初始化标识id
                        url: '/community/list',
                        where: {}
                    });
                }, 2000);
            }
            ,error: function(){
                //请求异常回调
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg("导入失败！");
                });
            }
        });
    });

</script>

</html>